<script lang="ts" setup>
import { ref, reactive } from "vue";
import UserStoress from "@/store/user";
import { apiReviseUserData, apiRevisePostData } from "@/api/api";
import { UserFilled, Opportunity } from "@element-plus/icons-vue";
const store = UserStoress();
//存储修改信息
const sizeForm = reactive({
  username: store.userData.name,
  newName: "",
});
const onLoad = () => {
  console.log("简单");
};

//修改用户名
const reviseName = () => {
  apiReviseUserData(1, {
    name: "我是新名字哦",
  })
    .then((res) => {
      alert("修改成功");
    })
    .catch((error) => {
      alert("修改失败");
    });
};

/**
 * 修改文章信息
 */
const revisePosts = () => {
  apiRevisePostData(1, {
    title: "我是新名字哦!!!",
  })
    .then((res) => {
      alert("修改成功");
      console.log(res);
    })
    .catch((error) => {
      alert("修改失败");
      console.log(error);
    });
};
</script>
<template>
  666
  {{ store.userData }}
  <el-button type="primary" size="default" @click="revisePosts"
    >修改文章标题</el-button
  >

  <el-button type="primary" size="default" @click="reviseName"
    >修改用户名</el-button
  >

  <h2>个人中心页面</h2>
  <el-form class="login-form" size="large" :model="sizeForm">
    <el-input
      disabled
      :placeholder="sizeForm.username"
      :prefix-icon="UserFilled"
    />
    <el-input
      v-model="sizeForm.newName"
      placeholder="请输入新昵称"
      :prefix-icon="Opportunity"
    />
    <el-button type="primary" size="default" @click.prevent="onLoad"
      >修改</el-button
    >
  </el-form>
</template>
<style lang="less" scoped></style>
